<template>
  <div style="height: 100%;width: 100%">
    <div class="demo_device">


      <div class="name">
        设备终端编号:
      </div>
      <div class="device_input">
        <a-input placeholder="请输入设备终端编号" v-model:value="destination"/>
      </div>

      <div class="name">
        查询日期:
      </div>
      <div class="device_input">
        <!--        <a-input placeholder="请输入设备终端编号" v-model:value="destination"/>-->
        <a-date-picker v-model:value="date" @change="onChange" :disabledDate="disabledDate"/>
      </div>
      <div class="demo_btn">
        <a-button type="primary" @click="create_url">
          生成链接
        </a-button>
      </div>
      <div class="result_content" v-if="url">
        <a-textarea style="height: 100%;width: 100%" placeholder="生成结果" allow-clear v-model:value="url"/>
      </div>
      <div class="result_content" v-if="url">
        <a-button type="primary" @click="open">
          测试
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import {ref} from "vue"
import {encryption} from "@/utils/base64";
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue"
import {handle_time} from "@/utils/handle_time";

export default {
  name: "create_url",
  setup() {
    const route = useRoute()
    const router = useRouter()
    const url = ref('')
    const destination = ref('HJKLY4010101,测试链接')
    const date = ref(handle_time(new Date()))

    const create_url = () => {
      try {
        const device = destination.value.split(',')[1]
        const uEquipmentCode = destination.value.split(',')[0]
        set_device_code(uEquipmentCode, device)
      } catch (e) {
        message.error("设备参数异常")
      }
    }

    const onChange = (date, dateString) => {
      date.value = dateString;
      console.log(dateString);
    }

    const disabledDate = (current) => {
      // 不可选过去时间
      // return current < moment().add(-1, 'd');
      // 不可选未来时间
      return current && current > Date.now();
    }

    /**
     * 写入 device_code
     * */
    const set_device_code = (code, name = "江苏电力") => {

      if (code) {
        url.value = `http://${window.location.host}/#/index/test/demo_device?uEquipmentCode=${encryption(code)}&status=${name}&device=&date=${handle_time(new Date(date.value))}`;
      }
      // store.commit("SET_DEVICE_CODE", device_data.device_list[key].uEquipmentCode)
      //  http://localhost:8080/#/index/test/demo_device?uEquipmentCode=SEpLTFk0MDEwMTE2&status=123123&device=
    }

    const open = () => {
      window.open(url.value)
    }
    return {
      url,
      create_url,
      destination,
      open,
      onChange,
      date,
      disabledDate
    }
  }
}
</script>

<style scoped lang="scss">
.demo_device {
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .name {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    color: #535353;
    //font-weight: bolder;
  }

  .device_input {
    width: 100%;
  }

  .demo_btn {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
  }

  .result_content {
    margin-top: 10px;
  }
}

.ant-calendar-picker {
  width: 100%;
}
</style>
